<template>
    <div>
        <!-- 添加或修改药品供应商生产商维护对话框 -->
        <el-dialog :close-on-click-modal="false" :title="title" v-model="open" append-to-body width="700px">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item :label="tabsName + '厂商'" prop="supplierName">
                            <el-input v-model="form.supplierName" placeholder="请输入厂商" @input="supplierNameInput" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="tabsName + '别名'">
                            <el-input v-model="form.supplierJc" placeholder="请输入供应商别名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="tabsName + '类别'" prop="supplierClass">
                            <el-input v-model="form.supplierClassName" disabled placeholder="请输入厂商类别" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="tabsName + '代码'" prop="supplierCode">
                            <el-input v-model="form.supplierCode" placeholder="请输入厂商代码" />
                        </el-form-item>
                    </el-col>
                    <!--                    <el-col :span="12">-->
                    <!--                        <el-form-item label="注册商标" prop="trademark">-->
                    <!--                            <el-input v-model="form.trademark" placeholder="请输入注册商标"/>-->
                    <!--                        </el-form-item>-->
                    <!--                    </el-col>-->
                    <el-col :span="12">
                        <el-form-item label="是否国外" prop="foreignx">
                            <el-radio-group v-model="form.foreignx">
                                <el-radio v-for="dict in dictDataMap['sys_yes_no']" :key="dict.dictValue"
                                          :value="dict.dictValue">{{
                                        dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否使用" prop="usedFlag">
                            <el-radio-group v-model="form.usedFlag">
                                <el-radio v-for="dict in dictDataMap['sys_yes_no']" :key="dict.dictValue"
                                          :value="dict.dictValue">{{
                                        dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="输入码">
                            <el-input v-model="form.inputCode" placeholder="请输入输入码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注信息" prop="remarks">
                            <el-input v-model="form.remarks" placeholder="请输入备注信息" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {addDrugSupplierCata, updateDrugSupplierCata} from "@/api/drug/drugSupplierCata";
import {firstLetterResult} from "@/utils/pinyin"
import {useDictStoreHook} from "@/store/modules/dict";

const dictStore = useDictStoreHook();
const dictDataMap = ref(dictStore.isTypeGetData('sys_yes_no'))
const formRef = ref()
// 按钮loading
const buttonLoading = ref(false)
// 是否显示弹出层
const open = ref(false)
// 表单参数
const form = ref<any>({})

const emits = defineEmits(["getList"])
// 表单校验
const rules = ref({
    supplierName: [
        { required: true, message: "厂商不能为空", trigger: "blur" }
    ],
    supplierJc: [
        { required: true, message: "别名不能为空", trigger: "blur" }
    ],
})

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    tabsName: {
        type: String,
        default: ''
    },
    supplierClass: {
        type: String,
        default: ''
    }
})
// 取消按钮
function cancel() {
    open.value = false;
}
// 表单重置
function reset() {
    form.value = {
        id: undefined,
        supplierJc: undefined,
        supplierName: undefined,
        supplierClass: props.supplierClass,
        supplierClassName: props.tabsName,
        inputCode: "",
        trademark: undefined,
        foreignx: "N",
        supplierCode: undefined,
        usedFlag: "Y",
        delFlag: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        remarks: undefined
    };
}
/** 新增按钮操作 */
function handleAdd() {
    reset();
    open.value = true;
}
/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    form.value = row
    form.value.supplierClassName = props.tabsName
    open.value = true;
}
/** 商家名称输入框改变事件 设置拼音码*/
function supplierNameInput(value) {
    if (value) {
        form.value.inputCode = firstLetterResult(value)
    } else {
        form.value.inputCode = ""
    }
}
/** 提交按钮 */
function submitForm() {
    (formRef.value as any).validate(valid => {
        if (valid) {
            buttonLoading.value = true;
            if (form.value.id != null) {
                updateDrugSupplierCata(form.value).then(_response => {
                    ElMessage.success("修改成功");
                    emits('getList');
                    cancel()
                }).finally(() => {
                    buttonLoading.value = false;
                });
            } else {
                addDrugSupplierCata(form.value).then((response: any) => {
                    ElMessage.success("新增成功");
                    cancel()
                    emits('getList', response.data);
                }).finally(() => {
                    buttonLoading.value = false;
                });
            }
        }
    });
}
defineExpose({
    handleAdd,
    handleUpdate
})
</script>

<script lang = "ts" >
export default {
    name: "drugSupplierCataAdd"
}
</script>

<style scoped></style>
